<template>
  <div class="table">
    <div class="option">
      <slot name="option"></slot>
    </div>
    <div class="list" :style="{height:listHeight+'px'}">
      <el-table :data="list" style="width: 100%" :height="listHeight" stripe>
        <el-table-column v-for="item in column" :prop="item['prop']" :label="item['label']" :width="item['width']" :key="item['prop']">
          <template slot-scope="scope">
            <div v-if="item['btn'] && item['btn']==='switch'">
              <el-button disabled v-if="scope.row[item['prop']]" size="mini" plain>启用</el-button>
              <el-button disabled type="danger" v-else size="mini" plain>禁用</el-button>
            </div>
            <div v-else-if="item['btn'] && item['btn']==='editAndDel'">
              <el-button type="primary" size="mini" plain @click="item.edit(scope.row)">编辑</el-button>
              <el-button type="warning" size="mini" plain @click="item.del(scope.row.id)">删除</el-button>
            </div>
            <div v-else>
              {{scope.row[item['prop']]}}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom" :style="{height: bottomHeight+'px'}">
      <slot name="bottom"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "TableList",
    props: {
      list: {
        default: [],
        type: Array
      },
      column: {
        default: [],
        type: Array
      }
    },
    data() {
      return {
        width: 480,
        height: 270,
        listHeight: 500,
        bottomHeight: 200,
      }
    },
    created() {
      this.initSize();
    },
    methods: {
      initSize() {
        const W = window.screen.width, H = document.body.clientHeight;
        let headerHeight = 61;
        if (W <= 1400) {
          headerHeight = 51;
        }
        this.width = W / 4;
        this.height = this.width * 9 / 16;
        this.listHeight = (this.height - 20) * 3;
        this.bottomHeight = H - headerHeight - this.listHeight - 60-20;
      },
    }
  }
</script>

<style scoped lang="scss">
  .table {
    height: 100%;
    /*background-color: #000;*/

    .option {
      height: 60px;
      box-sizing: border-box;
      /*text-align: center;*/
      /deep/ .el-form-item {
        margin-bottom: 0;

        .el-input__inner {
          padding: 0 5px;
        }
      }
    }

    .list {

    }

    /deep/ .el-table {
      th, .el-table__cell {
        text-align: center;
      }

      .el-table__body .el-table__cell {
        padding: 3px 5px;
      }

      .el-button.is-disabled,
      .el-button.is-disabled:active,
      .el-button.is-disabled:focus,
      .el-button.is-disabled:hover {
        cursor: default;
      }
    }

    .bottom {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }


  }


</style>
